<template>
	<view class="container">
		<uni-nav-bar title="点采退货" fixed statusBar :border="false" height="88rpx" left-icon="left" @clickLeft="onClickLeft"
			right-icon="search"></uni-nav-bar>
		<view class="list" :style="{paddingBottom: `calc(${safeAreaBottom}px + 80rpx	)`}">
			<view class="item" v-for="(item,index) in goodsList" :key="item.id">
				<view class="top">
					<view class="title u-ellipsis">
						{{ item.commodityName }}
					</view>
				</view>
				<view class="bottom">
					<view class="info">
						<view class="sub_title">规格：{{ item.commodityStandard }}</view>
						<view class="sub_title">大包装：{{ item.commodityPacking }}</view>
						<view class="sub_title">入库件数：{{ item.procureNumber }}</view>
						<view class="sub_title">入库数量：{{ item.commodityCount }}</view>
						<view class="sub_title">可退数量：{{ item.inventoryNumber }}</view>
						<view class="sub_title">已退数量：{{ item.returnedCount }}</view>
						<view class="sub_title"><text style="width: 70%;">退货数量：{{ item.returnNum }} </text><uni-icons type="compose" size="28"
								color="#2979ff" @click="openInput(index,item)"></uni-icons></view>
						<view class="sub_title">配送规格：{{ item.deliveryNorms }}</view>
						<view class="sub_title">件数（配送规格）：{{ item.returnCount }}</view>
						<view class="sub_title">生产日期：{{ item.manufactureTime | parseTime('YYYY-MM-DD') }}</view>
						<!-- 						<view class="sub_title" v-if="step == 2" @click.stop="delPurchase(item)" style="justify-content: flex-end;width: 100%;"><uni-icons
								type="trash" size="28" color="#f54343"></uni-icons></view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="bottomFix btn type-1" :style="{paddingBottom:safeAreaBottom + 'px'}" @click.stop="toNext">
			<text>下一步</text>
		</view>
		<!-- 		<view v-if="step == 2" class="bottomFix btn type-1" :style="{paddingBottom:safeAreaBottom + 'px'}" @click.stop="toSubmit">
			<text>提交审核</text>
		</view> -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="修改退货数量" @confirm="submit" @close="close" before-close>
				<template>
					<uni-forms ref="form" :model="formData" :rules="rules" label-width="50" validate-trigger="blur">
						<uni-forms-item label="数量:" name="returnNum">
							<uni-easyinput type="number" v-model="formData.returnNum" focus placeholder="请输入退货数量" :clearable="false" trim="all" adjust-position />
						</uni-forms-item>
					</uni-forms>
				</template>
			</uni-popup-dialog>
		</uni-popup>

		<!-- 		<uni-popup ref="searchDialog" type="dialog">
			<uni-popup-dialog ref="searchClose" mode="input" title="修改退货数量" @confirm="submit" @close="close" before-close>
				<template>
					<uni-forms ref="form" :model="formData" :rules="rules" label-width="50" validate-trigger="blur">
						<uni-forms-item label="数量:" name="returnNum">
							<uni-easyinput type="number" v-model="formData.returnNum" placeholder="请输入退货数量" :clearable="false" trim="all" adjust-position />
						</uni-forms-item>
					</uni-forms>
				</template>
			</uni-popup-dialog>
		</uni-popup> -->
	</view>
</template>

<script>
	import { DecimalUtils } from '@/utils/math'
	import { reqFollowReturnDetail } from '@/apis/goods.js'
	export default {
		name: 'ShBack',
		data() {
			return {
				// step: 1,
				// remark: '',
				goodsList: [],
				enterList: [],
				// goodsListCopy: [],
				inboundNumber: '', 
				// 表单数据
				formData: {
					returnNum: null,
					id: ''
				},
				rules: {
					// 对name字段进行必填验证
					returnNum: {
						rules: [{
								required: true,
								errorMessage: '请输入退货数量',
							},
							{
								format: 'number',
								errorMessage: '退货数量格式错误'
							},
							{
								maximum: 10,
								errorMessage: '请勿超过最大可退数量'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									let reg = /^[0-9]\d*$/

									if (!reg.test(value)) {
										callback('请输入退货数量')
									}
								}
							}
						],
					}
				},
			}
		},
		onLoad(params) {
			this.inboundNumber = params?.inboundNumber;
			this.enterList = params?.enterList ? JSON.parse(params?.enterList) : [];
			this.getOrderList();
		},
		methods: {
			async getOrderList() {
				let res = await reqFollowReturnDetail({ inboundNumber: this.inboundNumber });
				if (res.code === 200) {
					this.goodsList = res.data.map(item => ({
						...item,
						returnNum: 0,
						returnCount: 0
					}));
					this.changeGoodsList();
				}
			},
			async changeGoodsList() {
				this.enterList.forEach(item => {
					const index = this.goodsList.findIndex(it => item.id == it.id);
					this.goodsList[index].returnNum = item.returnNum;
					this.goodsList[index].returnCount = item.returnCount;
				})
			},
			openInput(index, item) {
				this.rules.returnNum.rules[2].maximum = this.goodsList[index].inventoryNumber
				this.formData.returnNum = this.goodsList[index].returnNum;
				this.formData.id = item.id;
				this.$refs.inputDialog.open();
			},
			submit() {
				this.$refs.form.validate().then(async (suc) => {
					const index = this.goodsList.findIndex(item => item.id === this.formData.id);
					const newObj = { ...this.goodsList[index] };
					newObj.returnNum = +this.formData.returnNum;
					newObj.returnCount = DecimalUtils.divide(newObj.returnNum, newObj.deliveryNorms).toFixed(2);
					this.$set(this.goodsList, index, newObj);
					this.$refs.inputDialog.close();
				}).catch((err) => {
					console.log('失败')
				})
			},
			close() {
				this.formData = {
					returnNum: null,
					id: ''
				};
				this.$refs.inputDialog.close();
				console.log("关闭");
			},
			toNext() {
				const resArr = this.goodsList.filter(item => item.returnNum != 0);
				if (resArr.length == 0) {
					uni.utils.toast('请输入退货数量');
					return;
				}
				this.$navTo('./shBackNext', { id: this.id, enterList: JSON.stringify(resArr),inboundNumber:this.inboundNumber }, 'redirectTo')
			}
		},
	}
</script>

<style>
	page {
		background: #f7f7f7;
	}
</style>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
	}

	.list {
		padding: 20rpx 20rpx;
		padding-bottom: 0;

		.item {
			padding: 20rpx 24rpx;
			background-color: #fff;
			border-radius: 8rpx;
			margin-bottom: 20rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				margin-bottom: 10rpx;

				.title {
					width: 100%;
					font-size: $uni-font-size-upBase;
					color: #000;
				}

				.sub_title {
					font-size: $uni-font-size-mini;
					flex: 1;
					color: #333;
					text-align: right;
				}
			}

			.bottom {
				display: flex;

				.pic {
					width: 200rpx;
					height: 200rpx;

					image {
						width: 100%;
						height: 100%;
						background-color: #f7f7f7;
					}
				}

				.info {
					flex: 1;
					display: flex;
					flex-wrap: wrap;
					align-items: center;

					.sub_title {
						display: flex;
						height: 50rpx;
						align-items: center;
						font-size: $uni-font-size-mini;
						width: 50%;
						color: #333;
					}
				}
			}
		}
	}

	.ramark {
		padding-left: 20rpx;
		box-sizing: border-box;
		position: fixed;
		width: 100%;
		height: 80rpx;
		bottom: 0;
		display: flex;
		align-items: center;
		font-size: $uni-font-size-base;
		background-color: #67c23a;
		color: #fff;
	}

	.bottomFix {
		position: fixed;
		width: 100%;
		height: 80rpx;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: $uni-font-size-base;
	}
</style>